<template>
    <div>
      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="productName"
            label="产品名称"
            width="180"
          ></el-table-column>
         
          <el-table-column
            prop="detail"
            label="产品细节"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="introduction"
            label="产品介绍"
            width="180"
          ></el-table-column>
          <el-table-column prop="editTime" label="更新时间">
            <template #default="scope">
              {{ formDataMoment(scope.row.editTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row._id)"
                >编辑</el-button
              >
              
              <el-popconfirm
                title="确认删除吗"
                confirm-button-text="确认"
                cancel-button-text="删除"
                @confirm="handleDelete(scope.row._id)"
              >
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        v-model="dialogVisible"
        title="新闻预览"
        width="50%"
        :before-close="handleClose"
      >
        <div>
          <h2>{{ previewData.title }}</h2>
          <div style="font-size: 12px; color: gray">
            {{ formDataMoment(previewData.editTime) }}
          </div>
        </div>
        <el-divider>
          <el-icon><star-filled /></el-icon>
        </el-divider>
        <div class="content">
          <div v-html="previewData.content"></div>
        </div>
      </el-dialog>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, reactive } from "vue";
  import { StarFilled } from "@element-plus/icons-vue";
  import axios from "axios";
  import moment from "moment";
  import { ElMessage } from "element-plus";
  import { useRouter } from "vue-router";
  const router = useRouter();
  moment.locale("zh-cn");
  const previewData = ref({});
  const formDataMoment = (date) => {
    return moment(date).format("LLLL");
  };
  const dialogVisible = ref(false);
  const tableData = ref([]);
  onMounted(() => {
    getTableList();
  });
  const handleEdit = (id) => {
    
      router.push(`/productManage/productEdit/${id}`)
  }
  const handleLook = (data) => {
    previewData.value = data;
    dialogVisible.value = true;
  };
  const handleDelete = async (id) => {
    let res =await axios.delete(`/adminapi/product/list/${id}`);
    if (res.data.code == 200) {
      ElMessage.success("操作成功");
      getTableList();
    } else {
      ElMessage.error("操作失败");
    }
  };

  const getTableList = async () => {
    let res = await axios.get("/adminapi/product/list");
    tableData.value = res.data.data;
  };
  </script>
  <style lang="scss" scoped>
  ::v-deep .el-dialog {
    img {
      max-width: 100%;
    }
  }
  </style>